﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <link href="/layui-v2.8.11/layui/css/layui.css" type="text/css" rel="stylesheet" />

    <script src="/layui-v2.8.11/layui/layui.js"></script>
    <script src="/layui-v2.8.11/js/jquery.min.js"></script>
    <script src="/layui-v2.8.11/js/common.js"></script>
</head>
<body>

    <div id="demo1">
        <div class="layui-card">
            <div class="layui-card-header">表格1</div>
            <div class="layui-card-body">
                <button id="btnAddRow">增加行</button>
                <table class="layui-table" id="tb1"></table>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">表格2</div>
            <div class="layui-card-body">
                <button id="btnAddRow2">增加行</button>
                <table class="layui-table" id="tb2"></table>
            </div>
        </div>
    </div>


    <script type="text/html" id="tplRow1">

        <tr>
            <td>11</td>
        </tr>

    </script>



    <script type="text/html" id="tplDetail1Row">

    </script>


    <script>

        //注册模块
        registerLauiModule("/layui-v2.8.11/modules/", "AdfTable");

        //
        layui.use(["AdfTable"], function () {

            var adfTable = layui.AdfTable;

            //参数
            var opt = {
                id: "tb1",
                addRowElem: "#btnAddRow",
                deleteRowElem: ".deleteRow",
                events: {
                    row:[{name:"change",method:function() {

                    }}]
                },
                fields: [
                    {
                        caption: "编码",
                        name: "Code",
                        width:"300",
                        tpl:"<input class='layui-input' value='{{d.Code}}' name='Code' />"
                    }, {
                        caption: "品名",
                        name: "ProductName",
                        width:"0",
                        tpl: "<input class='layui-input' value='{{d.ProductName}}' name='ProductName' />"
                    }, {
                        caption: "数量",
                        name: "Quantity",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.Quantity}}' name='Quantity' />"
                    }, {
                        caption: "单价",
                        name: "UnitPrice",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.UnitPrice}}' name='UnitPrice' />"
                    }, {
                        caption: "小计",
                        name: "UnitPrice",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.SubTotalPrice}}' name='SubTotalPrice' />"
                    }, {
                        caption: "操作",
                        width: "200",
                        tpl: "<button class='layui-btn layui-btn-xs'>修改</button><button class='layui-btn layui-btn-xs deleteRow'>删除</button>"
                    }],
                data:[]
        };

            //默认创建
            var curTable = adfTable.Create(opt);

            //给出变化事件
            curTable.RegisterRowElemChange(function () {
                console.log("change",this);
            });

            curTable.RegisterRowElemClick(function () {
                console.log("click", this);
            });


            //参数
            var opt2 = {
                id: "tb2",
                addRowElem: "#btnAddRow2",
                deleteRowElem: ".deleteRow",
                events: {
                    row: [{
                        name: "change", method: function () {

                        }
                    }]
                },
                fields: [
                    {
                        caption: "编码",
                        name: "Code",
                        width: "300",
                        tpl: "<input class='layui-input' value='{{d.Code}}' name='Code' />"
                    }, {
                        caption: "品名",
                        name: "ProductName",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.ProductName}}' name='ProductName' />"
                    }, {
                        caption: "数量",
                        name: "Quantity",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.Quantity}}' name='Quantity' />"
                    }, {
                        caption: "单价",
                        name: "UnitPrice",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.UnitPrice}}' name='UnitPrice' />"
                    }, {
                        caption: "小计",
                        name: "UnitPrice",
                        width: "0",
                        tpl: "<input class='layui-input' value='{{d.SubTotalPrice}}' name='SubTotalPrice' />"
                    }, {
                        caption: "操作",
                        width: "200",
                        tpl: "<button class='layui-btn layui-btn-xs'>修改</button><button class='layui-btn layui-btn-xs deleteRow'>删除</button>"
                    }],
                data: []
            };

            //默认创建
            var curTable2 = adfTable.Create(opt2);

            //给出变化事件
            curTable2.RegisterRowElemChange(function () {
                console.log("change", this);
            });

            curTable2.RegisterRowElemClick(function () {
                console.log("click", this);
            });

        });

    </script>
</body>
</html>